---
id: commonTools
title: 常用工具
---

import { Image } from "antd";

import weppagetest1 from "../img/weppagetest1.png";

### Chrome DevTools

`调试及性能评测`

- Lighthouse： 用于网站整体质量评估。浏览器内置了 lighthose，也可以单独下载 npm 包
- Throttling 调整网络吞吐
- Performance 性能分析
- Network 网络加载分析

### WebPage Test

`多测试地点、全面性能报告`

<Image width={200} src={weppagetest1} />

<http://webpagetest.org/>

解读WebPageTest的报告
- waterfall chart 请求瀑布图
- first view 首次访问
- repeat view 二次访问


### 本地部署WebPageTest工具




### 常用的性能测量APIS
- 关键时间节点(Navigation Timing , Resource Timing)
- 网络状态(Network APIs)
- 客户端服务端协商(HTTP Client Hints) ＆ 网页显示状态(UI APIS)

- DNS 解析耗时: domainLookupEnd - domainLookupStart
- TCP 连接耗时: connectEnd - connectStart
- SSL 安全连接耗时: connectEnd - secureConnectionStart
- 网络请求耗时 (TTFB): responseStart - requestStart
- 数据传输耗时: responseEnd - responseStart
- DOM 解析耗时: domInteractive - responseEnd
- 资源加载耗时: loadEventStart - domContentLoadedEventEnd
- First Byte时间: responseStart - domainLookupStart
- 白屏时间: responseEnd - fetchStart
- 首次可交互时间: domInteractive - fetchStart
- DOM Ready 时间: domContentLoadEventEnd - fetchStart
- 页面完全加载时间: loadEventStart - fetchStart
- http 头部大小： transferSize - encodedBodySize
- 重定向次数：performance.navigation.redirectCount
- 重定向耗时: redirectEnd - redirectStart
